---
title: Vérifier un Captcha
description: Apprenez à créer une route d'API et à la récupérer auprès du client.
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';

Les [points de terminaison du serveur](/fr/guides/endpoints/#points-de-terminaison-du-serveur-routes-api) peuvent être utilisés comme points de terminaison de l'API REST pour exécuter des fonctions telles que l'authentification, l'accès à la base de données et les vérifications sans exposer de données sensibles au client.

Dans cette recette, une route d'API est utilisée pour vérifier Google reCAPTCHA v3 sans exposer le secret aux clients.

## Prérequis

- Un projet avec [SSR](/fr/guides/on-demand-rendering/) (`output: 'server'`) activé

## Recette

<Steps>
1. Créez un point de terminaison `POST` qui accepte les données recaptcha, puis les vérifie avec l'API de reCAPTCHA. Ici, vous pouvez définir en toute sécurité des valeurs secrètes ou lire des variables d'environnement.

    ```js title="src/pages/recaptcha.js"
    export async function POST({ request }) {
      const data = await request.json();

      const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify';
      const requestHeaders = {
        'Content-Type': 'application/x-www-form-urlencoded'
      };
      const requestBody = new URLSearchParams({
        secret: "YOUR_SITE_SECRET_KEY",   // Il peut s'agir d'une variable d'environnement
        response: data.recaptcha          // Le jeton transmis par le client
      });

      const response = await fetch(recaptchaURL, {
        method: "POST",
        headers: requestHeaders,
        body: requestBody.toString()
      });

      const responseData = await response.json();

      return new Response(JSON.stringify(responseData), { status: 200 });
    }
    ```

2. Accédez à votre point de terminaison en utilisant `fetch` à partir d'un script client :

    ```astro title="src/pages/index.astro"
    <html>
      <head>
        <script is:inline src="https://www.google.com/recaptcha/api.js"></script>
      </head>

      <body>
        <button class="g-recaptcha" 
          data-sitekey="PUBLIC_SITE_KEY" 
          data-callback="onSubmit" 
          data-action="submit"> Cliquez sur moi pour vérifier le captcha ! </button>

        <script is:inline>
          function onSubmit(token) {
            fetch("/recaptcha", {
              method: "POST",
              body: JSON.stringify({ recaptcha: token })
            })
            .then((response) => response.json())
            .then((gResponse) => {
              if (gResponse.success) {
                // Vérification du Captcha avec succès
              } else {
                // Échec de la vérification du Captcha
              }
            })
          }
        </script>
      </body>
    </html>
    ```
</Steps>
